<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>document.getElementsByTagName("html")[0].className += " js";</script>
  <link rel="stylesheet" href="assets/css/style.css">
  <title>Get Started | CodyFrame</title>
</head>
<body>
  <div class="container max-width-sm padding-y-lg">
    <div class="article text-component">
      <h1>Get started with CodyFrame</h1>
      
      <ol class="list list--ol">
        <li>Import components from the <a href="https://codyhouse.co/ds/components" target="_blank" rel="noopener nofollow">CodyHouse UI Framework</a>. To add a component to your project, create a new SCSS file (e.g., <strong>_{index}_{component-name}.scss</strong>) inside the "assets/css/components/" folder and paste in it the SCSS of the component. Create a new JS file (e.g., <strong>_{index}_{component-name}.js</strong>) inside the "assets/js/components/" folder and paste in it the JS of the component. You will find the <em>index</em> value in a comment in the SCSS/JS files of the component.</li>
        <li>Create your bespoke style (e.g., custom buttons and forms) using the <a href="https://codyhouse.co/ds/globals" target="_blank" rel="noopener nofollow">Global Editors</a>. To apply the custom style to your project, copy the SCSS generated by the editor and paste it in the corresponding file in the "main/css/custom-style" folder.</li>
        <li>Install one of our <a href="https://codyhouse.co/ds/docs/extensions" target="_blank" rel="noopener nofollow">code editor extensions</a> for HTML/CSS autocompletion.</li>
      </ol>

      <h2>Documentation</h2>
      <p>For further help, <a href="https://codyhouse.co/ds/get-started" target="_blank" rel="noopener nofollow">check the documentation</a>.</p>
    </div>
  </div>
<script src="assets/js/scripts.js"></script>
</body>
</html>